import { useState, useEffect } from 'react'
import { resourcePath } from '../../../../../../../utils/resource';
import { Button, Table } from 'antd';
import useBusinessMap from '../../../../../../common/BusinessMap/useBusinessMap';
import { navByWkt } from '../../../../../../../utils/helper/mapHelper';
import JcyjApi from '../../../../../../../utils/apis/JcyjApi';
export default function Hd(props) {
    const [datas, setDatas] = useState();
    
    const [params, setParams] = useState({
        pageSize: 5,
        pageNum: 1,
        jcdlx: '河道'
    });
    const [total, setTotal] = useState();
    useState(() => {
        
        JcyjApi.jcdList(params).then(resp => {
            setDatas(resp.rows);
            setTotal(resp?.total);
        })
    }, [params])

    const map = useBusinessMap();

    return <div>
        <div style={{
            background: `url(${resourcePath.blockTitleBg})`,
            height: 36,
            backgroundSize: '100% 100%',
            fontSize: 18,
            lineHeight: '36px',
            paddingLeft: 12,
            fontWeight: "bold"
        }}>
            河道监测(<span>{total}</span>)
        </div>
        <div style={{
            padding: 12
        }}>
            <Table style={{
                // height: 233
            }} columns={[{
                title: '站点名',
                dataIndex: 'zdm',
                ellipsis: true
            }, {
                width: 70,
                align: "center",
                render: (text, record) => {
                    return <Button type="link" size="small" onClick={e => {
                        if (record.geom) {
                            navByWkt(record.geom, map)
                        }
                        props.onDetail?.(record);
                        props.setShowScroll(false);
                        props.setDetailItem(record);
                        setTimeout(()=>{
                            props.setShowScroll(true);
                        },0)
                    }}>详情</Button>
                }
            }]} dataSource={datas}
                size="small"
                bordered
                onRow={record => {
                    return {
                        onClick: e => {
                            if (record.shp) {
                                navByWkt(record.shp, map)
                            }
                        }
                    }
                }}
                pagination={{
                    current: params.pageNum,
                    pageSize: params.pageSize,
                    total,
                    simple: true,
                    onChange: (page) => {
                        setParams(params => {
                            return {
                                ...params,
                                pageNum: page
                            }
                        })
                    }
                }}
            />
        </div>
    </div>;
}